<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>部门用户</title>
    <link rel="stylesheet" href="/static/css/element-ui/element-ui.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/public.js"></script>
</head>
<body>
<div v-cloak id="app">
    <input type="hidden" value="${id}" id="id">
    <input type="hidden" value="${name}" id="name">
    <el-page-header @back="closeDialog" :content="title"></el-page-header>
    <i class="el-icon-close close-btn" @click="closeDialog"></i>
    <div class="mt-55 plr-15">
        <el-row type="flex" :gutter="20" justify="space-between">
            <el-col :span="10" :xs="10">
                <el-input placeholder="昵称/电话号码/用户名" size="medium" v-model="search.sContent">
                    <template slot="prepend">昵称/电话号码/用户名</template>
                </el-input>
            </el-col>
            <el-col :span="4" :xs="4" class="text-right">
                <el-tooltip content="搜索用户" placement="right" effect="light">
                    <el-button size="medium" @click="searchUser" clearable
                               type="primary" icon="el-icon-search"
                               circle></el-button>
                </el-tooltip>
            </el-col>
        </el-row>

        <%--表格部分--%>
        <el-table size="small" class="mt-10"
                  :data="paging.tableData"
                  style="width: 100%">
            <el-table-column
                    fixed
                    prop="nickname"
                    label="昵称"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex == '1'">男</span>
                    <span v-if="scope.row.sex == '2'">女</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="phoneNum"
                    label="手机号"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="省份"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="地市"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.username == 'admin'"
                               @click="removeUserRole(scope.row)" type="text" size="mini">移除角色
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <%--分页部分--%>
        <div class="text-right">
            <el-pagination :hide-on-single-page="true"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="paging.currentPage"
                           :page-sizes="[10,20]"
                           :page-size="paging.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="paging.total">
            </el-pagination>
        </div>
    </div>
</div>
<script src="/static/app/system/role_user.js"></script>
</body>
</html>
